<template>
  <view class="container">
    <image class="indexbg" src="../../static/images/indexbg.png" mode=""></image>
    <view class="header">
      <image src="../../static/images/indexsearch.png" mode="aspectFill" @click="gosearch"></image>
      <view class="title">甘肃医疗</view>
    </view>
    <swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item @click="goswiperdetail(item)" v-for="item in swiperlist" :key="item.id">
        <image :src="item.image" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <view class="itembox">
      <view class="item" v-for="item in indexlist" :key="item.id" @click="godatalist(item)">
        <image :src="item.image" mode="aspectFill"></image>
      </view>
    </view>
    <button @click="$refs.phone.open()" style="position: fixed; bottom: 130rpx; right: 50rpx; padding: 0; width: 100rpx; height: 100rpx; background-color: transparent">
      <image src="../../static/images/kefu.png" style="width: 100rpx; height: 100rpx"></image>
    </button>
    <uni-popup ref="phone" type="bottom">
      <view class="phone">
        <view class="phoneitem" @click="callkefu(obj.service)">客服1：{{ obj.service }}</view>
        <view class="phoneitem" @click="callkefu(obj.holiday_service)">节假日客服：{{ obj.holiday_service }}</view>
        <view class="phoneitem" @click="callkefu(obj.hours_service)">24小时客服：{{ obj.hours_service }}</view>
        <view class="phoneitem" @click="$refs.phone.close()">取消</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      indexlist: [],
      swiperlist: [],
      obj: {}
    };
  },
  onLoad() {
    // 获取首页服务分类
    this.getindextype();
    // 获取首页轮播图
    this.getswiper();
    // 获取客服手机号
    this.getkefuphone();
  },
  onHide() {
    this.$refs.phone.close();
  },
  methods: {
    // 获取客服手机号
    async getkefuphone() {
      const res = await uni.$http.get('common/init');
      console.log(res.data.data);
      this.obj = res.data.data;
    },
    // 点击拨打客服电话
    callkefu(phone) {
      console.log(phone);
      uni.makePhoneCall({
        phoneNumber: phone
      });
    },
    // 获取轮播图
    async getswiper() {
      const res = await uni.$http.post('index/getBanner');
      console.log('轮播图-----', res.data.data);
      this.swiperlist = res.data.data;
    },
    // 获取首页分类
    async getindextype() {
      const res = await uni.$http.get('index/getProductType');
      console.log('首页分类----', res.data.data);
      this.indexlist = res.data.data;
    },
    // 跳转到轮播详情
    goswiperdetail(item) {
      uni.navigateTo({
        url: '/sub_mearthion/swiperdetail/swiperdetail?data=' + JSON.stringify(item)
      });
    },
    // 跳转到搜索
    gosearch() {
      uni.navigateTo({
        url: '/sub_mearthion/search/search'
      });
    },
    // 跳转到数据列表
    godatalist(obj) {
      console.log('当前点击数据---', obj);
      uni.navigateTo({
        url: '/sub_mearthion/datalist/datalist?currentitem=' + JSON.stringify(obj)
      });
    }
  }
};
</script>

<style lang="scss" scoped>
button::after {
  background-color: transparent !important;
  text-align: center;
  padding: 0;
  border: none;
}
.container {
  .indexbg {
    position: relative;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 442rpx;
  }
  .header {
    display: flex;
    position: absolute;
    top: 60rpx;
    left: 30rpx;
    image {
      width: 60rpx;
      height: 60rpx;
    }
    .title {
      font-size: 36rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #ffffff;
      margin-left: 20rpx;
    }
  }
  .swiper {
    position: absolute;
    z-index: 20;
    top: 170rpx;
    left: 30rpx;
    width: 690rpx;
    height: 340rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .itembox {
    box-sizing: border-box;
    margin-top: 90rpx;
    .item {
      display: inline-block;
      margin-left: 30rpx;
      margin-bottom: 30rpx;
      width: 330rpx;
      height: 190rpx;
      overflow: hidden;
      border-radius: 20rpx   20rpx   20rpx   20rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .phone {
    width: 750rpx;
    height: 480rpx;
    text-align: center;
    .phoneitem {
      width: 750rpx;
      height: 120rpx;
      text-align: center;
      line-height: 120rpx;
      background: #ffffff;
    }
  }
}
</style>
